<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-11 18:50:09
 * @LastEditTime: 2020-06-30 16:16:43
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\practiceTask\divide.vue
 * @Description: 分班
 -->
<template>
    <div>
        <wordTable :data="data" :label="label"></wordTable>
        <div class="line"></div>
        <div>
            <div class="divide_btns">
                <div :class="divideFlag?'currentClass':''" @click="swichDivide(true)">{{$t('practiceTask.btn.auto')}}</div>
                <div :class="divideFlag?'':'currentClass'" @click="swichDivide(false)">{{$t('practiceTask.btn.manual')}}</div>
            </div>
            <!-- 手动 -->
            <div v-show="!divideFlag" class="divide_automatic">
                <el-form :model="form" ref="form" label-width="180px" :rules="rules">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-form-item :label="$t('practiceTask.label.max')" prop="number">
                                <el-input v-model="form.number" :placeholder="$t('fundingManagement.tips.plzInput')" maxlength="3"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" @click="divideSubmit">{{$t('practiceTask.btn.divide')}}</el-button>
                        </el-col>
                    </el-row>
                    <el-row v-for="(item) in form.children" :key="item.subCourseNo">
                        <el-col :span="6">
                            <el-form-item :label="$t('practiceTask.label.className')">
                                <span>{{ item.subCourseNo }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('practiceTask.label.number')" label-width="100px">
                                <el-input-number v-model="item.studentCount" :precision="0" @change="handleChange" :min="1" size="medium"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 自动 -->
            <div v-show="divideFlag" class="divide_manual">
                <el-form :model="forms" ref="forms" label-width="180px" :rules="rule1">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-form-item :label="$t('practiceTask.label.divideNum')" prop="divideNum">
                                <el-input :placeholder="$t('fundingManagement.tips.plzInput')" v-model="forms.divideNum" maxlength="3"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-button type="primary" @click="divideSubmits">{{$t('practiceTask.btn.divide')}}</el-button>
                        </el-col>
                    </el-row>
                    <el-row v-for="(item) in forms.children" :key="item.subCourseNo">
                        <el-col :span="6">
                            <el-form-item :label="$t('practiceTask.label.className')">
                                <span>{{ item.subCourseNo }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('practiceTask.label.number')" label-width="100px">
                                <el-input-number v-model="item.studentCount" :precision="0" @change="handleChange" :min="1" size="medium"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import wordTable from '../common/wordTable';
import UTILS from "common/src/utils/utils";
import commonMixins from '../commonMixins';
import { getDetails } from 'common/src/api/practiceManagement/practiceTask';
export default {
    // 组件名称
    name: 'divide',
    // 局部注册的组件
    components: {
        wordTable
    },
    mixins: [commonMixins],
    // 组件参数 接收来自父组件的数据
    props: {
        ids: {
            type: String,
            default: ''
        }
    },
    // 组件状态值
    data() {
        return {
            divideFlag: true,
            maxNum: '',
            divideNum: '', // 分班数量
            items: {
                subCourseNo: '', // 课程号
                studentCount: '', // 人数
                courseCode:''
            },
            data: {}, // 数据
            label: [
                [{ label: this.$t('label.schoolTerm'), props: 'yearTerm' }, { label: this.$t('label.grade'), props: 'grade' }],
                [{ label: this.$t('label.major'), props: 'majorName' }, { label: this.$t('practiceTask.label.score'), props: 'credits' }],
                [{ label: this.$t('practiceTask.label.number'), props: 'confirmCount' }, { label: this.$t('label.courseCode'), props: 'courseCode' }],
                [{ label: this.$t('fundingManagement.label.courseName'), props: 'courseName' }]
            ],
            form: {
                number: '', // 每班人数
                children: []
            },
            forms: {
                divideNum: '', // 拆分成多少个班
                children: []
            },
            rules: {
                number: [
                    { required: true, message: this.$t('practiceReworkManagement.tips.mustWrite'), trigger: ['blur'] },
                    { pattern: /^[1-9]\d*$/, message: this.$t('practiceTask.tips.nonZero'), trigger: ['blur'] }
                ]
            },
            rule1: {
                divideNum: [
                    { required: true, message: this.$t('practiceTask.tips.plsDivideNum'), trigger: ['blur'] },
                    { pattern: /^[1-9]\d*$/, message: this.$t('practiceTask.tips.nonZero'), trigger: ['blur'] }
                ]
            }
        };
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    created() {
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    mounted() {
    },
    // 组件方法
    methods: {
        swichDivide(val) {
            if (this.divideFlag === val) {
                return;
            }
            this.divideFlag = !this.divideFlag;
        },
        getData(yearTerm) {
            let datas = null;
            if (!this.divideFlag) { // 手动分班
                this.$refs.form.validate(valid => {
                    if (valid) {
                        let num = 0;
                        this.form.children.forEach(item => {
                            this.$set(item, 'yearTerm', yearTerm);
                            num += parseInt(item.studentCount);
                        });
                        if (num !== this.data.confirmCount) {
                            this.$noSelectAlert(this.$t('practiceTask.tips.numNotSame'));
                            return;
                        }
                        datas = this.form;
                    }
                });
            } else {
                this.$refs.forms.validate(valid => {
                    if (valid) {
                        let num = 0;
                        this.forms.children.forEach(item => {
                            this.$set(item, 'yearTerm', yearTerm);
                            num += parseInt(item.studentCount);
                        });
                        if (num !== this.data.confirmCount) {
                            this.$noSelectAlert(this.$t('practiceTask.tips.numNotSame'));
                            return;
                        }
                        datas = this.forms;
                    }
                });
            }
            return datas;
        },
        // 手动分班
        divideSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let lengths = parseInt(this.data.confirmCount / this.form.number);
                    let remainder = this.data.confirmCount % this.form.number;
                    this.maxNum = this.form.number;
                    this.form.children = [];
                    for (let i = 0; i < lengths; i++) {
                        let element = UTILS.clone(this.items);
                        element.studentCount = this.form.number;
                        element.subCourseNo = this.numberDigits((i + 1));
                        element.courseCode = this.data.courseCode;
                        this.form.children.push(element);
                    }
                    if (remainder > 0) {
                        let element = UTILS.clone(this.items);
                        element.studentCount = remainder;
                        element.subCourseNo = this.numberDigits((lengths + 1));
                        element.courseCode = this.data.courseCode;
                        this.form.children.push(element);
                    }
                }
            });
        },
        // 自动分班
        divideSubmits() {
            this.$refs.forms.validate((valid) => {
                if (valid) {
                    let size = parseInt(this.data.confirmCount / this.forms.divideNum);
                    let remainder = this.data.confirmCount % this.forms.divideNum;
                    this.forms.children = [];
                    for (let i = 0; i < this.forms.divideNum; i++) {
                        let element = UTILS.clone(this.items);
                        element.studentCount = size;
                        if(remainder>0 && i === this.forms.divideNum-1){
                            element.studentCount = size + remainder;
                        }
                        element.subCourseNo = this.numberDigits((i + 1));
                        element.courseCode = this.data.courseCode;
                        this.forms.children.push(element);
                    }
                }
            });
        },
        getDetails() {
            let jsonData = {
                id: this.ids
            };
            getDetails(jsonData).then(res => {
                this.data = res.data;
            });
        }
    }
}
</script>
<style lang="scss" scoped>
$size: 3px; // 按钮圆角
.line {
    width: 100%;
    background-color: #ccc;
    margin-top: 24px;
    height: 1px;
}
.divide {
    &_btns {
        display: flex;
        width: 180px;
        margin-top: 30px;
        border-radius: 10px;
        div {
            flex: 1;
            padding: 10px 15px;
            border: solid #ccc 1px;
            cursor: pointer;
        }
        div:nth-child(1) {
            border-top-left-radius: $size;
            border-bottom-left-radius: $size;
        }
        div:nth-child(2) {
            border-top-right-radius: $size;
            border-bottom-right-radius: $size;
        }
        .currentClass {
            color: white;
            background-color: #3a7fe8;
            border: solid #3a7fe8 1px;
        }
    }
    &_automatic {
        margin-top: 20px;
    }
    &_manual {
        margin-top: 20px;
    }
}
/*** 消除input元素 type="number" 时默认的 加减按钮*/

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/*** 消除input元素 type="number" 时默认的 加减按钮---moz版*/
input[type='number'] {
    -moz-appearance: textfield;
}
</style>
